<template>
	<view class="page">
		<view class="cart-head">
			<checkbox value="0" />
			<image src="http://yao.hayzon.com/static/cart/shop.png"></image>
			<text>康品优选</text>
			<text class="edit">编辑</text>
		</view>
		<view class="good-item" v-for="(item,index) in goods" :key="index">
			<checkbox value="0" />
			<image :src="item.image"></image>
			<view>
				<view class="good-item-title">
					<text>{{item.title}}</text>
					<text>{{item.subtitle}}</text>
				</view>
				<view class="good-item-price">
					<text>￥{{item.price}}</text>
					<text>x{{item.count}}</text>
				</view>
			</view>
		</view>
		<view class="bottom-button-box">
			<view>
				<text>合计:<span>￥38.00</span></text>
				<text>不含运费</text>
			</view>
			<view class="select-all">
				<label>
					<checkbox value="0" />全选
				</label>
			</view>
			<view @tap="navigateTo">结算(1)</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				goods: [{
					image:"http://yao.hayzon.com/static/cart/goodImage.png",
					title: "枇杷秋梨膏 | 古法工艺。浓缩秋梨汁甘草枇杷菊花。一大罐450克",
					subtitle: "枇杷秋梨膏450克",
					price: "38.00",
					count: "1"
				}],
			}
		},
		methods: {
			navigateTo() {
				uni.navigateTo({
					url: 'goodOrder'
				})
			}
		},
		onShow () {
			// uni.hideTabBar();
		},
		onHide() {
			// uni.showTabBar();
		}
	}
</script>
<style>
	.page {}

	.bottom-button-box {
		position: fixed;
		bottom: 100rpx;
		width: 100%;
		display: flex;
	}

	.bottom-button-box view:first-child {
		background-color: #ffffff;
		flex-shrink: 0;
		width: 60%;
		padding-left: 30upx;
		padding-top: 10upx;
	}

	.bottom-button-box view:first-child text {
		display: block;
	}

	.bottom-button-box view:first-child text:first-child {
		font-size: 1.1em;
		font-weight: bold;
	}

	.bottom-button-box view:first-child text:last-child {
		font-size: 0.9em;
		color: #999999;
	}

	.bottom-button-box view:first-child text:first-child span {
		color: #da6b57;
	}

	.bottom-button-box view:last-child {
		width: 40%;
		background-color: #da6b57;
		color: #ffffff;
		height: 120upx;
		font-size: 1.2em;
		line-height: 120upx;
		text-align: center;
		font-weight: bold;
	}

	.select-all {
		position: absolute;
		top: 35upx;
		right: 300upx;
		color:#333333;
		font-size:1.1em;
	}
	.cart-head{
		margin-top:10upx;
		background-color:#ffffff;
		padding-left:30upx;
		padding-right:30upx;
		line-height: 60upx;
		position:relative;
	}
	.cart-head image{
		width:45upx;
		height:45upx;
		vertical-align: text-bottom;
	}
	.edit{
		position: absolute;
		right:30upx;
		top:0;
		color:#0000ff;
	}
	.good-item{
		margin-top:10upx;
		padding:30upx;
		display:flex;
		flex-direction: row;
		background-color:#ffffff;
	}
	.good-item checkbox{
		flex-shrink: 0;
		margin-top:60upx;
	}
	.good-item image{
		width:160upx;
		height:160upx;
		flex-shrink: 0;
		margin-top:25upx;
	}
	.good-item-title{
		font-size:1.1em;
		padding-left:10upx;
		color:#333333;
	}
	.good-item-title text{
		display:block;
	}
	.good-item-title text:last-child{
		font-size:0.8em;
		color:#999999;
	}
	.good-item-price{
		padding-left:10upx;
	}
	.good-item-price text:first-child{
		color:#eb544d;
		font-size:1.1em;
		font-weight: bold;
	}
	.good-item-price text:last-child{
		position: absolute;
		right:30upx;
	}
</style>
